<template>
  <div class="dapartments-container">
    <div class="app-container">
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools :node-data="company" :is-root="true" @add-deots="addData" />
        <!-- 树形组件
        data :树形组件数据
        props:指定树形组件 或后代 组件 的键名
        default-expand-all :默认展开此结构

        平级关系要对齐  -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          default-expand-all
        >
          <template v-slot="{data}">
            <treeTools
              :node-data="data"
              @edit-deots="editDepts"
              @add-deots="addData"
              @del-depts="getDepartments"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 弹出框 -->

      <!-- <AddDept
        :list="list"
        :node-data="nodeData"
        :show-visible="showVisible"
        @addDepts="getDepartments"
        @addClose="showVisible=false"
      /> -->
      <AddDept
        ref="addDeptRef"
        :list="list"
        :node-data="nodeData"
        :show-visible.sync="showVisible"
        @addDepts="getDepartments"
      />
    </div>
  </div>
</template>

<script>
import { translistToTree } from '@/utils'
import AddDept from './components/add-dept.vue'
import { reqGetDepartments } from '@/api/departments'
import treeTools from './components/tree-tools.vue'
export default {
  name: 'Departments',
  components: { treeTools, AddDept },
  data() {
    return {
      // 加载图
      loading: false,
      // 需要检测是否有重复的值 备用 数组
      list: [],
      // 中介储存值 添加用
      nodeData: {},
      showVisible: false,
      company: { },
      departs: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 获取组织架构
    async  getDepartments() {
      this.loading = true
      const { data: { depts, companyName }} = await reqGetDepartments()
      // console.log(data)
      // list 赋值  原来的 请求数据数组 而不是要 树形数组
      this.list = depts
      // 递归转树形
      this.departs = translistToTree(depts, '')
      // console.log(this.departs)/// 递归的每一项 存储到这个数组
      // 公司名 在该数组
      this.company = { name: companyName, manager: '负责人', id: '' }
      this.loading = false
    },
    // 添加
    addData(data) {
      // 展开对话框
      this.showVisible = true
      // 接收值
      this.nodeData = data
    },
    // 编辑
    async editDepts(data) {
      // 显示弹框
      this.showVisible = true
      // 把自己的 数据赋值给nodeData的给
      this.nodeData = data
      // 获取 部门详情  发 ajax 弹框显示 是异步的  所以 要用 一步延迟操作
      this.$nextTick(() => {
        this.$refs.addDeptRef.GetDepartDetail()
        // 通过ref调用子组件里面的函数  为所欲为
      })
    }
  }
}
</script>

<style scoped  lang="scss">

.tree-card {
  padding: 30px 30px;
  font-size:14px;
}
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
